<template>
  <div class="myInput" id="input2">
    <el-autocomplete id="input2" class="inline-input" v-model="state" :fetch-suggestions="querySearch"
      :trigger-on-focus="false" :popper-append-to-body="true" @select="handleSelect" @clear="clearInput"
      :debounce="500">
    </el-autocomplete>
  </div>
</template>

<script>
  import {
    mapState,
  } from 'vuex';
  export default {
    name: "sel-input",
    components: {},
    data() {
      return {
        restaurants: [],
        state: null,
        results: [],
      };
    },
    mounted() {},
    computed: {
      ...mapState({
        allNodesId: state => state.knowledgeMap.allNodesId
      }),
    },
    methods: {
      // 点击待选项时触发的方法
      handleSelect(params) {
        this.$eventBus.$emit("toCenter", params.id);
      },
      // 清空输入框
      clearInput(e) {
        this.state = null;
      },
      // 定位搜索查询
      async querySearch(queryString, cb) {
        this.$eventBus.$emit("get_curAllId");
        if (!this.allNodesId.length) {
          return
        } else {
          const params = {
            nodeIds: this.allNodesId.join(","),
            keywords: queryString
          };
          this.$axios.get(this.$api.knowledgeMap.positionNode, {
              params
            }).then(res => {
              let results = [];
              if (res.data.message == "操作成功" && res.data.data.length == 0) {
                results = [{
                  "value": "暂无搜索结果",
                }];
                cb(results);
              } else if (res.data.message == "暂无节点信息" && res.data.code === 500 && res.data.data === null) {
                results = [{
                  "value": "暂无搜索结果",
                }];
                cb(results);
              } else {
                // 每次查询过后需要将待选项列表置空
                this.restaurants = [];
                for (let i = 0; i < res.data.data.length; i++) {
                  this.restaurants.push({
                    'id': res.data.data[i].id,
                    'value': res.data.data[i].name,
                  })
                }
                var restaurants = this.restaurants;
                results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                this.lastRes = JSON.parse(JSON.stringify(results));
                cb(results);
              }
            });
        }
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
    }
  }
</script>

<style lang="scss" scoped>
  .myInput {
    margin: 16px 0;
    display: flex;
    justify-content: center;

    .el-autocomplete {
      width: 288px;
      height: 40px;

      /deep/ input {
        border-radius: 20px !important;
        background: #F3F4F8;
        outline: none;
        border: none;
      }

      /deep/ .el-autocomplete-suggestion__list li {
        padding: 0 5px;
      }

      /deep/ .el-autocomplete-suggestion__list li:first-of-type {
        color: #3A58B9;
      }

      .myOption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;

        span:first-of-type {
          height: 24px;
          font-size: 12px;
          border-radius: 12px;
          background: #F3F4F8;
          max-width: 74px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span:last-of-type {
          font-size: 12px;
          border-radius: 12px;
          background: #F3F4F8;
          max-width: 74px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        p {
          flex-grow: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left: 10px;
        }
      }

      .myOption2 {
        color: #bbb;
        pointer-events: none;
      }

      /deep/ .el-input__inner {
        outline: none;
        border-radius: 2px;
        background-repeat: no-repeat;
        background-size: 16px;
        position: relative;
        background-position: 16px;
        background-color: #F3F4F8;

        &:focus {
          border-color: #3A58B9;
        }
      }
    }
  }
</style>